<template>
  <div class="content">
    <!-- 第一框 -->
    <div class="div-question "
         :class="border.div1">
      <div class="title-question">
        <span class="required">*</span>
        姓名：
        <input style="width:63px;"
               type="text"
               v-model="form.name"
               class="underline">
        &nbsp;&nbsp;&nbsp;&nbsp;年龄：
        <input style="width:21px;"
               type="text"
               v-model="form.age"
               class="underline">岁
        <div style="margin-top:8px;"></div>
        电话：
        <input style="width:84px;"
               type="text"
               v-model="form.tel"
               class="underline">
        <div class="error-tips"
             v-if="border.div1">请输入内容</div>
      </div>
    </div>
    <!-- 第二框 -->
    <div class="div-question "
         :class="border.div2">
      <div class="title-question">
        <span class="required">*</span>
        您的性别是
        <div style="margin-top:8px;"></div>
        <div class="grade-radio">
          <el-radio v-model="form.sex"
                    :label="1"
                    class="grade-bgc single-line">男</el-radio>
        </div>
        <div class="grade-radio">
          <el-radio v-model="form.sex"
                    :label="2"
                    class="grade-bgc single-line">女</el-radio>
        </div>
        <div class="error-tips"
             v-if="border.div2">请选择选项</div>
      </div>
    </div>
    <!-- 第三框 -->
    <div class="div-question "
         :class="border.div3">
      <div class="title-question">
        <span class="required">*</span>
        您现在的年级是
        <div style="margin-top:8px;"></div>
        <div class="grade-radio"
             v-for=" (item,index) in grade"
             :key="index">
          <el-radio v-model="form.grade"
                    :label="item.id"
                    class="grade-bgc">{{item.name}}</el-radio>
        </div>
        <div class="error-tips"
             v-if="border.div3">请选择选项</div>
      </div>
    </div>
    <!-- 第四框 -->
    <div class="div-question "
         :class="border.div4"
         v-if="showMore">
      <div class="title-question">
        <span class="required">*</span>
        您在毕业后关于就业行业优先考虑的因素有 ？
        <span class="title-tips">【请选择1-6项】</span>
        <div style="margin-top:8px;"></div>
        <div class="grade-radio"
             v-for=" (item,index) in industryFactors"
             :key="index">
          <el-checkbox v-model="form.industryFactor"
                       :label="item.id"
                       class="grade-bgc">{{item.name}}</el-checkbox>
        </div>
        <div class="error-tips"
             v-if="border.div4">请选择选项</div>
      </div>
    </div>
    <!-- 第五框 -->
    <div class="div-question "
         :class="border.div5"
         v-if="showMore">
      <div class="title-question">
        <span class="required">*</span>
        关于毕业后就业地的选择 ，您最看重以下哪些因素？
        <span class="title-tips">【请选择1-3项】</span>
        <div style="margin-top:8px;"></div>
        <div class="grade-radio"
             v-for=" (item,index) in regionFactors"
             :key="index">
          <el-checkbox v-model="form.regionFactor"
                       :label="item.id"
                       class="grade-bgc single-line">{{item.name}}</el-checkbox>
        </div>
        <div class="error-tips"
             v-if="border.div5">请选择选项</div>
      </div>
    </div>
    <!-- 第六框 -->
    <div class="div-question "
         :class="border.div6"
         v-if="showMore">
      <div class="title-question">
        <span class="required">*</span>
        请您阅读下面的题目，并就每句话同个人实际情况的符合程度作出判断。
        <div style="margin-top:8px;"></div>
        <el-table :data="form.hobbyTable"
                  style="width: 100%">
          <el-table-column property="title"
                           width="220">
          </el-table-column>
          <el-table-column property="date"
                           label="非常不符合"
                           width="90">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status"
                        :label="1"
                        class="grade-bgc single-line hide"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name"
                           label="不符合"
                           width="80">
            <template slot-scope="scope"
                      class="aa">
              <el-radio v-model="scope.row.status"
                        :label="2"
                        class="grade-bgc single-line hide"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name"
                           label="比较不符合"
                           width="90">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status"
                        :label="3"
                        class="grade-bgc single-line hide"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name"
                           label="比较符合"
                           width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status"
                        :label="4"
                        class="grade-bgc single-line hide"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name"
                           label="符合"
                           width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status"
                        :label="5"
                        class="grade-bgc single-line hide"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name"
                           label="非常符合"
                           width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status"
                        :label="6"
                        class="grade-bgc single-line hide"></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <div class="error-tips"
             v-if="border.div6">此题为必答题，请回答小题</div>
      </div>
    </div>
    <!-- 提交 -->
    <el-button type="primary"
               class="submit"
               @click="submit">提交</el-button>
    <!-- 进度条 -->
    <div class="footer">问卷星&nbsp;&nbsp;提供技术支持</div>
    <div class="progress"
         ref="progress">
      <div>{{percent}}%</div>
      <div class="progress-bar">
        <div class="progress-bgc"><span class="current"
                ref="current"></span></div>
      </div>
      <div>进度</div>
    </div>
  </div>
</template>

<script>
import datas from '@/store/data.js'
export default {
  name: 'Header',
  data () {
    return {
      form: {
        name: '',
        age: '',
        tel: '',
        sex: '',
        grade: '',
        industryFactor: [],
        regionFactor: [],
        hobbyTable: datas.hobbyTable
      },
      border: { div1: '', div2: '', div3: '', div4: '', div5: '', div6: '' },
      dialogVisible: false,
      submitStatus: false,
      grade: datas.grade,
      industryFactors: datas.industryFactors,
      industryChecked: [],
      regionFactors: datas.regionFactors,
      regionChecked: [],
      currentProgress: [],
      percent: 0,
      showMore: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.progressBar)
  },
  computed: {
    basic () {
      const { name, age, tel, sex, grade, industryFactor, regionFactor } = this.form
      return { name, age, tel, sex, grade, industryFactor, regionFactor }
    }
  },
  watch: {
    basic: {
      handler (val) {
        if (val.name && val.age && val.tel) {
          this.currentProgress.indexOf('1') === -1 && this.currentProgress.push('1')
        } else {
          this.sliceArr('1')
        }
        if (val.sex) {
          this.currentProgress.indexOf('2') === -1 && this.currentProgress.push('2')
        } else {
          this.sliceArr('2')
        }
        if (val.grade) {
          this.currentProgress.indexOf('3') === -1 && this.currentProgress.push('3')
          if (val.grade > 3) {
            this.showMore = true
          } else {
            this.showMore = false
          }
        } else {
          this.sliceArr('3')
        }
        if (val.industryFactor.length !== 0) {
          this.currentProgress.indexOf('4') === -1 && this.currentProgress.push('4')
          if (val.industryFactor.length > 6) {
            val.industryFactor.pop()
            this.msgBox('此题最多只能选择6项')
          }
        } else {
          this.sliceArr('4')
        }
        if (val.regionFactor.length !== 0) {
          this.currentProgress.indexOf('5') === -1 && this.currentProgress.push('5')
          if (val.regionFactor.length > 3) {
            val.regionFactor.pop()
            this.msgBox('此题最多只能选择3项')
          }
        } else {
          this.sliceArr('5')
        }
      },
      deep: true
    },
    'form.hobbyTable': {
      handler (val) {
        const hobbyStatus = val.every((item, index, arr) => {
          return item.status !== ''
        })
        if (hobbyStatus) {
          this.currentProgress.indexOf('6') === -1 && this.currentProgress.push('6')
        } else {
          this.sliceArr('6')
        }
      },
      deep: true
    },
    currentProgress (newVal, oldVal) {
      const num = parseInt(newVal.length * 100 / 6)
      this.$refs.current.style.height = num + 'px'
      this.percent = num
    }
  },
  methods: {
    sliceArr (e) { // 切割数组留下剩余
      const arr = []
      for (let i = 0; i < this.currentProgress.length; i++) {
        if (this.currentProgress[i] !== e) {
          arr.push(this.currentProgress[i])
        }
      }
      this.currentProgress = arr
    },
    progressBar () { // 进度条
      if (!!document.documentElement.scrollTop && document.documentElement.scrollTop > 0) {
        this.$refs.progress.style.top = document.documentElement.scrollTop - 50 + 'px'
      }
    },
    submit () { // 提交
      const { form, border } = this
      this.verify(form)// 验证
      this.submitStatus = false
      for (const key in border) {
        if (form.grade < 3) {
          (border.div1 && border.div2 && border.div3) && (this.submitStatus = true)
        } else {
          border[key] !== '' && (this.submitStatus = true)
        }
      }
      if (this.submitStatus) {
        this.msgBox('请确保所有内容填写正确，页面将自动定位到第一个不符合要求的题目，请检查！')
      } else {
        this.$message({
          type: 'success',
          message: '提交成功！'
        })
      }
    },
    msgBox (message) { // 弹框提示
      this.$msgbox({
        title: '系统提示',
        message,
        showCancelButton: false,
        confirmButtonText: '确定',
        showClose: false,
        customClass: 'winClass',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done()
          }
        }
      })
    },
    verify (form) { // 校验
      for (const key in form) {
        if (Array.isArray(form[key])) {
          (key === 'industryFactor' && form[key].length === 0) && (this.border.div4 = 'divs');
          (key === 'regionFactor' && form[key].length === 0) && (this.border.div5 = 'divs');
          (key === 'industryFactor' && form[key].length !== 0) && (this.border.div4 = '');
          (key === 'regionFactor' && form[key].length !== 0) && (this.border.div5 = '')
          if (key === 'hobbyTable') {
            const status = form[key].every((item, index, array) => {
              return item.status !== ''
            })
            !status && (this.border.div6 = 'divs')
            status && (this.border.div6 = '')
          }
        } else {
          (key === 'sex' && form[key] === '') && (this.border.div2 = 'divs');
          (key === 'grade' && form[key] === '') && (this.border.div3 = 'divs');
          (key === 'sex' && form[key] !== '') && (this.border.div2 = '');
          (key === 'grade' && form[key] !== '') && (this.border.div3 = '');
          (key === 'name' && form[key] === '') && (this.border.div1 = 'divs');
          (key === 'age' && form[key] === '') && (this.border.div1 = 'divs');
          (key === 'name' && form[key] !== '') && (this.border.div1 = '');
          (key === 'age' && form[key] !== '') && (this.border.div1 = '');
          (key === 'tel' && form[key] === '') && (this.border.div1 = 'divs');
          (key === 'tel' && form[key] !== '') && (this.border.div1 = '')
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.content {
  background: #ffffff;
  // height: 500px;
  padding: 0 81px 120px;
  position: relative;
  .divs {
    border: 2px solid rgb(255, 153, 0);
  }
  .div-question {
    padding: 5px;
    clear: both;
    height: auto;
    margin: 0 0 10px;
    .title-question {
      margin-left: 10px;
      position: relative;
      font-size: 15px;
      color: #444444;
      font-weight: bold;
      .required {
        position: absolute;
        color: #ff0000;
        left: -10px;
      }
      .error-tips {
        color: Red;
        font-size: 13px;
        height: 30px;
        line-height: 30px;
        font-weight: normal;
      }
      input:focus {
        background: none;
        outline: none;
        border: solid 1px #cdcdcd;
        z-index: 999;
      }
      input:hover {
        background: none;
        outline: none;
        border: solid 1px #cdcdcd;
        z-index: 999;
      }
      .underline {
        font-size: 15px;
        vertical-align: top;
        position: relative;
        top: -3px;
        background-color: transparent;
        border: solid 1px transparent;
        padding: 3px;
        border-bottom: solid 1px #cdcdcd;
      }
      .grade-radio {
        display: inline-block;
        padding-bottom: 5px;
        .grade-bgc {
          color: #444444;
          width: 350px;
        }
        .single-line {
          width: 700px;
        }
      }
      .grade-radio:hover {
        background: #efefef;
      }
      .title-tips {
        color: #999;
        font-weight: normal;
        font-size: 14px;
      }
    }
  }
  .submit {
    margin: 40px auto 0;
    display: table-cell;
  }
  .footer {
    width: 96%;
    position: absolute;
    height: 40px;
    text-align: center;
    line-height: 50px;
    left: 2%;
    bottom: 25px;
    border-top: 1px solid #bbbbbb;
    color: #666666;
    font-family: Tahoma, 宋体;
    font-size: 12px;
  }
  .progress {
    text-align: center;
    position: absolute;
    width: 42px;
    border-radius: 2px;
    left: 935px;
    background: rgb(255, 255, 255);
    color: #adadad;
    font-size: 13px;
    padding: 10px 0;
    .progress-bar {
      height: 100px;
      width: 8px;
      margin: 5px auto;
      .progress-bgc {
        background: #e8e8e8;
        width: 6px;
        height: 100%;
        padding: 1px;
        .current {
          background-color: #0095ff;
          display: block;
        }
      }
    }
  }
}
.hide {
  color: rgba(255, 255, 255, 0);
  z-index: 999;
  width: 20px;
  overflow: hidden;
  text-align: center;
  margin: 5px 25px 0;
}
</style>
